<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
      <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
  </head>
  <body style="margin:0px;">
      <style>
          .nc_scale {
              width: auto;
              height: 47px;
              background: #e8e8e8;
              position: relative;
              margin: 0;
              padding: 0;
          }

          .nc_bg {
              background: #108ee9!important;
          }

          .nc-container #nc_1_wrapper {
              width: auto;
              height: 45px;
              font-size: 12px;
              line-height: 45px;
          }
          .nc-container .nc_scale .btn_ok {
              cursor: default;
              line-height: 45px;
              text-align: center;
              font-size: 20px;
              background: #fff;
              z-index: 3;
              color: #108ee9!important;
          }

          .nc-container .nc_scale span {
              text-align: center;
              width: 43px;
              height: 43px;
              line-height: 43px;
              border: 1px solid #ccc;
              position: absolute;
              left: 0;
              cursor: move;
              background: #fff;
              z-index: 2;
              border-radius:4px;
          }

          </style>

    <div id="__nc" style="margin-left:auto;margin-right:auto;width:100%;height:auto;">
    <div id="nc"></div></div>
    <script>
      var appKey = "FFFF0N000000000087DE";
      var nc_token = [appKey, (new Date()).getTime(), Math.random()].join(':');
      // 实例化nc
      var myLang = {
      'cn': {
          'LOADING':"加载中...",//加载
          'SLIDER_LABEL': "请向右滑动验证",//等待滑动
          'CHECK_Y':"验证通过",//通过
          'ERROR_TITLE':"非常抱歉，这出错了...",//拦截
          'CHECK_N':"验证未通过", //准备唤醒二次验证
          'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证
          'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示
          }
      }

      AWSC.use("nc", function (state, module) {
        // 初始化
        window.nc = module.init({
          //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey: appKey,
          //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene: "nc_register_h5",
          // 声明滑动验证需要渲染的目标ID。
          renderTo: "nc",
          token: nc_token,
          trans: {"key1": "code200"},
          elementID: ["usernameID"],
          width: "auto",
          is_Opt: 0,
          language: "cn",
          timeout: 10000,
          retryTimes: 5,
          errorTimes: 5,
          inline: false,
          upLang: myLang,
          bannerHidden: false,
          initHidden: false,
          //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
          success: function (data) {
            window.webkit.messageHandlers.getSlideData.postMessage(data)
          },
          // 滑动验证失败时触发该回调参数。
          fail: function (failCode) {
             window.console && console.log(failCode)
          },
          // 验证码加载出现异常时触发该回调参数。
          error: function (errorCode) {
             window.console && console.log(errorCode)
          }
        });
      })

      function reset(){
        window.nc.reset();
      }

      function slideCallBack(data) {
        var result = {
          'token':data.token,
          'sid':data.sessionId,
          'sig':data.sig
        };
        // 绑定Java接口与JavaScript函数。
        window.slideCaptchaInterface.getSlideData(JSON.stringify(result));
      }
    </script>
  </body>
</html>
